<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <!-- <el-button @click="go" icon="el-icon-back" type="text">返回</el-button> -->
      <div style="font-size:20px;margin-bottom:20px;">视频照片列表</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <!-- <el-button @click="add" size="small" >上传</el-button> -->
          <el-button @click="add" size="small" v-if="role!='SUPER'">上传</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" min-width="140"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="logContent" label="文件描述" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column prop="logTime" label="上传时间" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="照片" width="60">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="uploadPhoto(scope.row,'上传照片')">上传</el-button>
          </template>
        </el-table-column>
        <el-table-column label="视频" width="60">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="uploadPhoto(scope.row,'视频')">上传</el-button>
          </template>
        </el-table-column>
        <el-table-column label="航拍图" width="60">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="uploadPhoto(scope.row,'航拍图')">上传</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="detail(scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="remove(scope.row.id)" v-if="role!='SUPER'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" >
        <el-carousel trigger="click" height="400px">
            <el-carousel-item v-for="(item,index) in list" :key="index" >
                <img :src="`${download}${item.filePath}`" v-if="item.fileType === 1 && dialogFormVisible" style="width: 700px;height:400px;margin-top: 20px;"/>
                <vue-aliplayer-v2 :source="`${download}${item.filePath}`" v-if="item.fileType === 2 && dialogFormVisible" autoplay ref="VueAliplayerV2" :id="item.id" :options="options" style=""/>
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
    <!-- 上传-->
     <el-dialog title="新增视频照片" :visible.sync="addDialog">
      <el-form
        :label-position="labelPosition"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        size="small"
        style="width:380px;margin: 0 auto;"
        >
        <div >
            <el-form-item label="文件描述" prop="log">
            <el-input v-model="form.log"></el-input>
            </el-form-item>
            <!-- <el-form-item label="拍摄日期" prop="createTime">
            <el-date-picker
                v-model="form.createTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:280px;">
            </el-date-picker>
            </el-form-item> -->
            <el-form-item label="所属项目" prop="projectId">
            <el-select v-model="form.projectId" placeholder="请选择所属项目" style="width:280px;" filterable>
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-upload
                class="avatar-uploader"
                :action="upload"
                :file-list="fileList"
                :before-upload="beforeAvatarSuccess"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :limit="4">
                <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
              </el-upload>
            </el-form-item>
        </div>
        </el-form>
        <div slot="footer" class="dialog-footer botton_btn">
            <el-button type="primary" @click="save" size="small" style="margin-right:40px;">保 存</el-button>
            <el-button @click="cancel" size="small">取 消</el-button>
        </div>
    </el-dialog>
    <!-- 照片上传 -->
      <el-dialog :title="title" :visible.sync="photoUp">
      <el-form
        :label-position="labelPosition"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        size="small"
        style="width:380px;margin: 0 auto;"
        >
        <div >
            <el-form-item label="文件描述" prop="log">
            <el-input v-model="form.log"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-upload
                class="avatar-uploader"
                :action="upload"
                :file-list="fileList"
                :accept="accept"
                :before-upload="beforeAvatarSuccess"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :limit="4">
                <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
              </el-upload>
            </el-form-item>
        </div>
        </el-form>
        <div slot="footer" class="dialog-footer botton_btn">
            <el-button type="primary" @click="save" size="small" style="margin-right:40px;">保 存</el-button>
            <el-button @click="cancel" size="small">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import VueAliplayerV2 from 'vue-aliplayer-v2'
import base from '../api/base'
export default {
  components:{ VueAliplayerV2: VueAliplayerV2.Player },
  data() {
    return {
      accept:'',
      photoUp:false,
      title:'',
      role:localStorage.getItem('role'),
      upload: base.upload,
      download: base.download,
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false, // 弹框是否显示
      list: [],
      options: {
        height:'100%'
      },
      addDialog: false,
      form: {
        log: '',
        createTime: '',
        projectId: ''
      },
      labelPosition: "left",
      rules: {
        log: [
          { required: true, message: '请输入文件描述', trigger: 'blur' }
        ],
        createTime: [
          { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
        ],
        projectId: [
          { required: true, message: '请选择所属项目', trigger: 'change' }
        ],
      },
      files:[],
      fileList: [],
      projectList: []
    };
  },
  methods: {
    uploadPhoto(row,title){
      this.title = title
      this.photoUp = true
      console.log(row)
      if(title=='上传照片'){
        this.accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
      }
      if(title=='上传视频'){
        this.accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
      }
      if(title=='上传航拍图'){
        this.accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
      }
    },
    go() {
        this.$router.go(-1)
    },
    //分页
    handleSizeChange(val) {
        this.pageSize = val
        this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    beforeAvatarSuccess(file) {
      const typeAll = file.type.split('/')
      if(typeAll[0] === 'video') {
        if(['video/mp4'].indexOf(file.type) === -1) {
          this.$message.error("上传视频只能是mp4格式")
          return false
        }
      }else {
        if(['image/jpeg','image/jpg','image/png'].indexOf(file.type) === -1) {
          this.$message.error("上传图片只能是jpeg、jpg、png格式")
          return false
        }
      }
    },
    handleAvatarSuccess(res, file) {
      let obj = {}
      if(file.raw.type === 'video/mp4'){
        obj.fileType = 2
      }else {
        obj.fileType = 1
      }
      obj.name = file.name
      console.log(res)
      obj.fileId = res.data.successFiles[0].id
      obj.filePath = res.data.successFiles[0].filePath
      this.files.push(obj)
    },
    handleRemove(file) {
      this.files.map((v,index) => {
        if(v.name === file.name) {
          this.files.splice(index,1)
        }
      })
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if(valid) {
          console.log(this.files)
            if(this.files.length === 0) {
                this.$message.error('请上传图片或视频')
            } else {
              let files = []
              this.files.map(v => {
                let obj = {}
                obj.fileId = v.fileId
                obj.filePath = v.filePath
                obj.fileType = v.fileType
                files.push(obj)
              })
              let params = {
                files: files,
                projectId: this.form.projectId,
                createTime: this.form.createTime,
                log: this.form.log
              }
              this.$api.loginhome.logAdd(params)
                .then(res => {
                if (res.success) {
                    this.$message.success("保存成功")
                    this.addDialog = false
                    this.getList()
                    this.$refs['form'].resetFields()
                    this.files = []
                    this.fileList = []
                } else {
                  this.$message.error(res.message);
                }
                })
                .catch(() => {
            })
            }
        } else {
            return false
        }
      })
    },
    cancel() {
      this.addDialog = false
      this.$refs['form'].resetFields()
      this.files = []
      this.fileList = []
    },
    cancelPhoto(){
      this.photoUp = false
      this.$refs['form'].resetFields()
      this.files = []
      this.fileList = []
    },
    //新增
    add() {
      this.addDialog = true
    },
    // 删除
    remove(row) {
        this.$confirm('此操作将删除视频照片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.loginhome.deleteLog({id:row}).then(res => {
              if(res.success) {
                  this.$message.success('删除成功')
                  this.getList()
              } else {
                  this.$message.error(res.message)
              }
          })
        
        
        })
    },
    //查看查看详情
    detail(val) {
        this.list = val.annexs
        if(this.list.length > 0) {
            this.dialogFormVisible = true
        } else {
            this.$message.error('暂无图片视频信息')
        }
    },
    //刷新列表
    getList(val) {
      if(val) {
        this.currentPage = 1
      }
      let params = {
        pointId: this.$route.query.id,
        name: this.name,
        start: this.currentPage - 1,
        pageSize: this.pageSize
      }
      this.$api.loginhome.logPage(params)
      .then(res => {
        this.tableData = res.data;
        this.total = res.recordsTotal
        this.find()
      })
      .catch(() => {
      });
    },
    //查询所有项目 
    find() {
      this.$api.loginhome.findAllNcpr().then(res => {
        if(res.success) {
          this.projectList = res.data
        }
      })
    },
  },
  created() {
    this.getList()
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
/deep/.el-dialog__header{
  position: relative;
}
/deep/.el-dialog__headerbtn {
 position: absolute;
 top: 10px;
 right: 15px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.img {
    margin-top:20px;
    width:400px;
    height:400px;
}
</style>
